<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,maximum-scale=1.0" />
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/public.js" type="text/javascript" charset="utf-8"></script>
    <title>购物车</title>
</head>
<body>
	<div id="cart">
		<div class="cartCon">
			<div class="cartList">
				<img class="check" onclick="check(this)" src="images/btn_choice_normal@1x.png" data="0"/>
				<img class="listImg" src="images/photo4@1x.png"/>
				<div class="listCon">
					<span class="listName">炭烤薯条</span>
					<span class="listFlavor">口味：<i class="flavor">微辣</i></span>
					<div class="count">
	                    <span class="minus" onclick="minus(this)">-</span>
	                    <input class="num" value="1">
	                    <span class="plus" onclick="plus(this)">+</span>
	                </div>
				</div>
				<div class="listR">
					<img src="images/del.jpg" class="del" onclick="del(this)">
					<span class="listPrice">￥：<i class="price">988</i></span>
					<!--<span class="listNum">x<i class="conut">1</i></span>-->
				</div>
			</div>
			<div class="cartList">
				<img class="check" onclick="check(this)" src="images/btn_choice_normal@1x.png" data="0"/>
				<img class="listImg" src="images/photo4@1x.png"/>
				<div class="listCon">
					<span class="listName">炭烤薯条</span>
					<span class="listFlavor">口味：<i class="flavor">微辣</i></span>
					<div class="count">
	                    <span class="minus" onclick="minus(this)">-</span>
	                    <input class="num" value="1">
	                    <span class="plus" onclick="plus(this)">+</span>
	                </div>
				</div>
				<div class="listR">
					<img src="images/del.jpg" class="del" onclick="del(this)">
					<span class="listPrice">￥：<i class="price">988</i></span>
					<!--<span class="listNum">x<i class="conut">1</i></span>-->
				</div>
			</div>
			<div class="cartList">
				<img class="check" onclick="check(this)" src="images/btn_choice_normal@1x.png" data="0"/>
				<img class="listImg" src="images/photo4@1x.png"/>
				<div class="listCon">
					<span class="listName">炭烤薯条</span>
					<span class="listFlavor">口味：<i class="flavor">微辣</i></span>
					<div class="count">
	                    <span class="minus" onclick="minus(this)">-</span>
	                    <input class="num" value="1">
	                    <span class="plus" onclick="plus(this)">+</span>
	                </div>
				</div>
				<div class="listR">
					<img src="images/del.jpg" class="del" onclick="del(this)">
					<span class="listPrice">￥：<i class="price">988</i></span>
					<!--<span class="listNum">x<i class="conut">1</i></span>-->
				</div>
			</div>
			<div class="cartList">
				<img class="check" onclick="check(this)" src="images/btn_choice_normal@1x.png" data="0"/>
				<img class="listImg" src="images/photo4@1x.png"/>
				<div class="listCon">
					<span class="listName">炭烤薯条</span>
					<span class="listFlavor">口味：<i class="flavor">微辣</i></span>
					<div class="count">
	                    <span class="minus" onclick="minus(this)">-</span>
	                    <input class="num" value="1">
	                    <span class="plus" onclick="plus(this)">+</span>
	                </div>
				</div>
				<div class="listR">
						<img src="images/del.jpg" class="del" onclick="del(this)">
						<span class="listPrice">￥：<i class="price">988</i></span>
						<!--<span class="listNum">x<i class="conut">1</i></span>-->
					</div>
			</div>
		</div>
		<div class="menuConList">
			<div class="listTitle">
				推荐
			</div>
			<ul class="listCon">
				<li>
					<a href="details.html" class="listImg">
						<img src="images/photo1@1x.png" />
			
						<div class="listContent">
							<span class="listName">肉蟹煲</span>
							<span class="listPrice">￥<i class="price">138.00</i></span>
							<img class="listAdd" src="images/btn_add@1x.png" />
						</div>
						<span class="listNum">1</span>
					</a>
				</li>
				<li>
					<a href="javascript:void(0);" class="listImg">
						<img src="images/photo2@1x.png" />
						<div class="listContent">
							<span class="listName">肉蟹煲</span>
							<span class="listPrice">￥<i class="price">138.00</i></span>
							<img class="listAdd" src="images/btn_add@1x.png" />
						</div>
						<span class="listNum">0</span>
					</a>
				</li>
				<li>
					<a href="javascript:void(0);" class="listImg">
						<img src="images/photo1@1x.png" />
						<div class="listContent">
							<span class="listName">肉蟹煲</span>
							<span class="listPrice">￥<i class="price">138.00</i></span>
							<img class="listAdd" src="images/btn_add@1x.png" />
						</div>
						<span class="listNum">0</span>
					</a>
				</li>
				<li>
					<a href="javascript:void(0);" class="listImg">
						<img src="images/photo2@1x.png" />
						<div class="listContent">
							<span class="listName">肉蟹煲</span>
							<span class="listPrice">￥<i class="price">138.00</i></span>
							<img class="listAdd" src="images/btn_add@1x.png" />
						</div>
						<span class="listNum">0</span>
					</a>
				</li>
			</ul>
		</div>
		<div id="statement">
			<div class="checkAll">
				<img class="qx" date='0' src="images/btn_choice_normal@1x.png"/>
				<span>全选</span>
			</div>
			<div class="zjq">
				合计:
	            <span class="pl">￥
	                <span id="zj"></span>
	            </span>
	            <a href="javascript:void(0);" class="balance">结算</a>
	        </div>
		</div>
	</div>
<script type="text/javascript">
	var $divs = $(".menuConList");
    $divs.each(function() {
            var listCon=$(this).find('.listCon li')
            listCon.each(function(){
            	if ($(this).find('.listNum').html()<=0) {
            		$(this).find('.listNum').hide()
            	} else{
            		$(this).find('.listNum').show()
            	}
            })
        });
    //全选
    $(".checkAll").click(function(){
//        console.log(this);
        var check=$(this).find('.qx').attr('data')
        if(check==0){
        	$(this).find('.qx').attr('src','images/btn_chocie@1x.png')
        	$(this).find('.qx').attr('data',1)
        	$('.check').attr('src','images/btn_chocie@1x.png')
        	$('.check').attr('data',1)
        }else{
        	$(this).find('.qx').attr('src','images/btn_choice_normal@1x.png')
        	$(this).find('.qx').attr('data',0)
        	$('.check').attr('src','images/btn_choice_normal@1x.png')
        	$('.check').attr('data',0)
        }
        allPrice();
    });
    
    //单选
    function check(this5){
        var check=$(this5).attr('data')
        if(check==0){
        	$(this5).attr('src','images/btn_chocie@1x.png')
        	$(this5).attr('data',1)
        	$('.qx').attr('src','images/btn_chocie@1x.png')
        	$('.qx').attr('data',1)
        }else{
        	$(this5).attr('src','images/btn_choice_normal@1x.png')
        	$(this5).attr('data',0)
        	$('.qx').attr('src','images/btn_choice_normal@1x.png')
        	$('.qx').attr('data',0)
        }
      	allPrice();
    }
    //数量
//  function checkNum(){
//      var num=0;
//      $(".check").each(function(){
//          if($(this).attr("data") == 1){
//              var b=$($(this).parent().find('.count')).html();
//              num+=Number(b);
//          }
//      });
////      $(".fontColor1").html(num);
//  }
     function plus(this3) {
         var a = $(this3).prev().val();
         var kc_num = parseInt($(this3).closest('.lb').find(".kc_num").val())
         var good_num = parseInt($(this3).closest('.lb').find(".num").val())
         if (kc_num <= good_num) {
             alert('超出库存')
             return false;
         } else {
             a++
             $(this3).prev().val(a);
         }
		 
		 var sum = 0;
		 $(".check").each(function(){
            if($(this).attr("data") == 1){
               var a = $($(this).parent().find('.price')).html();    //单类商品数量
			   var b = $(this).parent().find('.num').val(); 
			   sum += a*b;
            }
        });
		$('#zj').html(sum);
     }

     function minus(this2) {
         var a = $(this2).next().val();
         a--;
         if (a >= 1) {
             $(this2).next().val(a);
         }
		 var sum = 0;
		 $(".check").each(function(){
            if($(this).attr("data") == 1){
               var a = $($(this).parent().find('.price')).html();    //单类商品数量
			   var b = $(this).parent().find('.num').val(); 
			   sum += a*b;
            }
        });
		$('#zj').html(sum);
     }

    function allPrice(){
        var sum=0;
        $(".check").each(function(){
            if($(this).attr("data") == 1){
               var a = $($(this).parent().find('.price')).html();    //单类商品数量
			   var b = $(this).parent().find('.num').val(); 
			   sum += a*b;
            }
        });
        $("#zj").html(sum);
    }
	
	// 删除
	function del(obj){
		$(obj).closest('.cartList').remove();
		console.log($('.cartCon').children().length)
		if($('.cartCon').children().length == 0){
			$('.cartCon').html('购物车是空的~')
		}
	}
</script>
</body>
</html>
